<%@ include file="/common/taglibs.jsp"%>
<div id="messagesDiv">
<%@ include file="/common/messages.jsp"%>
</div>
<script type="text/javascript">
	function clearEditForm() {
	  	var params = 'get=';
	  	getHTML(params, 'editRegistration');
	}

	function changeColor(cb, divId) {
		if ( cb.checked == true ) {
			$(divId).style.background = '#99FF99';
		} else {
			$(divId).style.background = 'yellow';
		}
	}

</script>

<form:form commandName="registration" method="post" action="#" id="registrationForm" onsubmit="saveRegistration();return false;">


		<form:hidden id="regId" path="id"/>

		<div id="col1">
		<span style="font-size: 2em;">
		ID: ${registration.id}
		</span>
        <icnmember:label styleClass="desc" key="registration.ticketNumbers"/>
        <form:errors path="ticketNumbers" cssClass="fieldError"/>
        <form:textarea path="ticketNumbers" id="ticketNumbers" cssClass="text medium" rows="3" cols="20"/>

        <icnmember:label styleClass="desc" key="registration.firstName"/>
        <form:errors path="firstName" cssClass="fieldError"/>
        <form:input path="firstName" id="firstName" cssClass="text medium"/>

        <icnmember:label styleClass="desc" key="registration.lastName"/>
        <form:errors path="lastName" cssClass="fieldError"/>
        <form:input path="lastName" id="lastName" cssClass="text medium"/>

        <icnmember:label styleClass="desc" key="registration.phone"/>
        <form:errors path="phone" cssClass="fieldError"/>
        <form:input path="phone" id="phone" cssClass="text medium"/>

        <icnmember:label styleClass="desc" key="registration.email"/>
        <form:errors path="email" cssClass="fieldError"/>
        <form:input path="email" id="email" cssClass="text medium"/>
        </div>

		<div id="col2">
		<div>
		<div>
        <icnmember:label styleClass="desc" key="registration.numberTickets"/>
        <form:errors path="numberTickets" cssClass="fieldError"/>
<!--        <form:input path="numberTickets" id="numberTickets" cssClass="text medium"/>-->
		<form:select id="numberTickets" path="numberTickets">
<!--				<form:option value="" label="-"/>-->
				<form:option value="1" label="1"/>
				<form:option value="2" label="2"/>
				<form:option value="3" label="3"/>
				<form:option value="4" label="4"/>
				<form:option value="5" label="5"/>
				<form:option value="6" label="6"/>
				<form:option value="7" label="7"/>
				<form:option value="8" label="8"/>
				<form:option value="9" label="9"/>
				<form:option value="10" label="10"/>
				<form:option value="11" label="11"/>
				<form:option value="12" label="12"/>
				<form:option value="13" label="13"/>
				<form:option value="14" label="14"/>
				<form:option value="15" label="15"/>
				<form:option value="16" label="16"/>
		</form:select>
		</div>
		<div>
        <icnmember:label styleClass="desc" key="registration.numberKids"/>
        <form:errors path="numberKids" cssClass="fieldError"/>
<!--        <form:input path="numberKids" id="numberKids" cssClass="text medium"/>-->
		<form:select id="numberKids" path="numberKids">
				<form:option value="" label="-"/>
				<form:option value="1" label="1"/>
				<form:option value="2" label="2"/>
				<form:option value="3" label="3"/>
				<form:option value="4" label="4"/>
				<form:option value="5" label="5"/>
				<form:option value="6" label="6"/>
				<form:option value="7" label="7"/>
				<form:option value="8" label="8"/>
				<form:option value="9" label="9"/>
				<form:option value="10" label="10"/>
				<form:option value="11" label="11"/>
				<form:option value="12" label="12"/>
				<form:option value="13" label="13"/>
				<form:option value="14" label="14"/>
				<form:option value="15" label="15"/>
				<form:option value="16" label="16"/>
		</form:select>
		</div>
		<div id="willAttendDiv" style="margin-top: 10px; font-size: 2em; background: yellow;">
	        Will Not Attend: <form:checkbox path="willAttend" id="willAttend" value="No" onclick="changeColor(this, 'willAttendDiv');"/>
        </div>
		</div>

        <icnmember:label styleClass="desc" key="registration.amtPaid"/>
        <form:errors path="amtPaid" cssClass="fieldError"/>
        <form:input path="amtPaid" id="amtPaid" cssClass="text medium"/>

        <icnmember:label styleClass="desc" key="registration.amtPaidAtRegistration"/>
        <form:errors path="amtPaidAtRegistration" cssClass="fieldError"/>
        <form:input path="amtPaidAtRegistration" id="amtPaidAtRegistration" cssClass="text medium"/>

        <icnmember:label styleClass="desc" key="registration.paymentMethod"/>
        <form:errors path="paymentMethod" cssClass="fieldError"/>
        <form:input path="paymentMethod" id="paymentMethod" cssClass="text medium"/>

        <icnmember:label key="registration.onlinePurchase"/>
        <form:errors path="onlinePurchase" cssClass="fieldError"/>
        <form:checkbox path="onlinePurchase" id="onlinePurchase"/>

        <icnmember:label styleClass="desc" key="registration.notes"/>
        <form:errors path="notes" cssClass="fieldError"/>
        <form:textarea path="notes" id="notes" cssClass="textarea"/>
        
        <icnmember:label styleClass="desc" key="registration.salesPerson"/>
        <form:errors path="salesPerson" cssClass="fieldError"/>
        <form:input path="salesPerson" id="salesPerson" cssClass="text medium"/>
        

		<div id="checkInDiv" style="margin-top: 10px; font-size: 2em; background: yellow;">
        CHECK IN: <form:checkbox path="checkedIn" id="checkedIn" onclick="changeColor(this, 'checkInDiv');"/>
        </div>
        </div>

    <div class="buttonBar bottom">
        <input type="submit" value="<fmt:message key="button.save"/>" />
		<input type="submit" onclick="clearEditForm(); return false;" value="Clear"/>
    </div>

</form:form>

<script type="text/javascript">
<!--    Form.focusFirstElement($('registrationForm'));-->
</script>
